<template>
  <div>
    <!-- 
      v-show="布尔值" 布尔值为true就显示，为false就隐藏
      v-if="布尔值" 布尔值为true就显示，为false就隐藏
      区别：v-show通过控制元素显示和隐藏，v-if通过控制dom来控制元素显示和隐藏
      开发的时候用那个？涉及到大量dom的显示和隐藏时，用v-show更合适； 在涉及到异步数据渲染时（组件的重新渲染），用v-if更合适
    -->
    <div class="box1" v-show="isShow">大盒子 v-show来控制</div>
    <div class="box1" v-if="isShow">大盒子 v-if来控制</div>
    <!-- 如果模板中直接使用data中的变量， -->
    <button @click="isShow=!isShow">点击切换显示和隐藏</button>

    <h3>诗歌标题 <span @click="isVisible=!isVisible">{{isVisible?'收起':'展开'}}</span></h3>
    <div class="content" v-show="isVisible">
      <p>xxxxxx</p>
      <p>yyyyyy</p>
    </div>


    <h3>根据学生成绩显示优良中差</h3>
    <p v-if="score>=90">优</p>
    <p v-else-if="score>=80">良</p>
    <p v-else-if="score>=70">中</p>
    <p v-else>差</p>

  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      isVisible: true,
      score: 99
    };
  },
  // methods: {
  //   toggle() {
  //     this.isShow = !this.isShow;
  //   },
  // },
};
</script>
<style>
.box1 {
  width: 200px;
  height: 200px;
  background-color: blue;
}
.content {
  border: 1px solid #000;
}
</style>